import './index.scss'
import { Card, Form, Input, Button, message } from 'antd'
import logo from '@/assets/image.png'
import { useDispatch, useSelector } from 'react-redux'
import { fetchLogin, setToken } from '@/store/modules/user'
import { useNavigate } from 'react-router-dom'
import { useEffect, useMemo, useState } from 'react'

const Login = () => {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    // const [messageApi, contextHolder] = message.useMessage();
    // const { token } = useSelector(state => state.user)
    //表单提交
    const onFinish = async (val) => {
        
        const res = await dispatch(fetchLogin(val))
        // console.log(res)
        if (res.code == 200) {
            message.success('登录成功')
            navigate('/')
        }
        else {
            message.error(res.message) 
        }
    }
    return (
        <div className="login">
            <Card className="login-container">
                <img className="login-logo" src={logo}  alt="" />
                {/* 登录表单 */}
                <Form validateTrigger="onBlur" onFinish={(val) => onFinish(val)} style={{marginTop:"32px"}}>
                    <Form.Item
                        name="account"
                        rules={
                            [
                                { required: true, message: 'Please input your username!' },
                                // { pattern: /^1[3-9]\d{9}/, message: '请输入正确的手机号' }
                            ]}
                    >
                        <Input size="large" placeholder="请输入账号" />
                    </Form.Item>
                    <Form.Item
                        name="passwd"
                        rules={[{ required: true, message: 'Please input your passwd!' }]} 
                    >
                        <Input.Password size="large"  placeholder="请输入密码" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" size="large" block>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Login